<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时</title>
    <style>
        .倒计时版面 {
            width: 240px; /* 宽高 */
            height: 305px;
            margin: 0 auto; /* 版心居中 */
            text-align: center; /* 文本对齐 水平居中 */
            line-height: 1; /* 行高, 数字是字体大小的倍数 */
            color: #fff; /* 文字颜色 */
            background-color: brown; /* 背景色, JS里实现随机切换颜色 */
            /* background-size: 240px; */
            /* float: left; */
            overflow: hidden; /* 溢出:隐藏 */
        }

        .倒计时版面 .今日日期 {
            font-size: 16px; /* 字体大小 */
            margin: 25px 0 14px; /* 外边距 */
        }

        .倒计时版面 .标题 {
            font-size: 33px; /* 字体大小 */
        }

        .倒计时版面 .下课时间指示 {
            margin-top: 80px; /* 上外边距 */
            font-size: 23px; /* 字体大小 */
        }

        .倒计时版面 small {
            font-size: 17px; /* 字体大小 */
        }

        .倒计时版面 .倒计时_时钟 {
            width: 142px; /* 设置宽, 高随父级盒子 */
            margin: 18px auto 0; /* 外边距 */
            overflow: hidden; /* 溢出:隐藏 */
        }

        .倒计时版面 .倒计时_时钟 span,
        .倒计时版面 .倒计时_时钟 i {
            display: block; /* 标签转换显示模式 */
            text-align: center; /* 文本对齐, 水平居中 */
            line-height: 34px; /* 行高 */
            font-size: 23px; /* 字体大小 */
            float: left; /* 浮动布局 */
        }

        .倒计时版面 .倒计时_时钟 span {
            width: 34px; /* 宽高 */
            height: 34px;
            border-radius: 2px; /* 边框线, 圆角属性 */
            background-color: #303430; /* 背景色 */
        }

        .倒计时版面 .倒计时_时钟 i {
            width: 20px; /* 设置宽, 高随父级盒子 */
            font-style: normal; /* 字体样式:正常, i标签默认斜体字 */
        }
    </style>

</head>
<body>
<div class="倒计时版面">
    <p class="今日日期">今天是2222年2月22日</p>
    <p class="标题">下课倒计时</p>
    <p class="倒计时_时钟">
        <span id="时">00</span>
        <i>:</i>
        <span id="分">25</span>
        <i>:</i>
        <span id="秒">20</span>
    </p>
    <p class="下课时间指示">18:30:00下课</p>
</div>

<!--
案例需求：计算到下课还有多少时间
分析：
①：用将来时间减去现在时间就是剩余的时间
②：核心： 使用将来的时间戳减去现在的时间戳
③：把剩余的时间转换为 天 时 分 秒

注意：
1. 通过时间戳得到是毫秒，需要转换为秒在计算
2. 转换公式：
d = parseInt(总秒数/ 60/60 /24); // 计算天数
h = parseInt(总秒数/ 60/60 %24) // 计算小时
m = parseInt(总秒数 /60 %60 ); // 计算分数
s = parseInt(总秒数%60); // 计算当前秒
-->
<script>
    // 1. 获取当前日期调换, 今日日期 里的信息
    const 当前日期 = new Date() // 实例化,日期对象
    const 今日日期 = document.querySelector('.今日日期') // 获取DOM元素
    // 分别取值
    let 年 = 当前日期.getFullYear()
    let 月 = 当前日期.getMonth() + 1
    let 日 = 当前日期.getDate()
    // 修改标签信息
    今日日期.innerHTML = `今天是${年}年${月}月${日}日`


    // 2. 倒计时实现
    function 获取随机颜色(布尔值 = true) { // 设置默认参数
        // 判断 传入的布尔值, 如果是true 则返回 #ffffff 格式
        if (布尔值 === true) {
            let 格式16进制颜色 = '#'
            let 数组_0到f之间的字符 = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
            for (let i = 0; i < 6; i++) { // 随机生成6个符号
                // 拼接字符串,    随机读取数组的一个元素值
                格式16进制颜色 += Math.floor(Math.random() * 数组_0到f之间的字符.length)
            }
            return 格式16进制颜色 // 字符串内容  #xxxxxx
        }

        // 判断 传入的布尔值, 如果是false 则返回 rgb(255,255,255) 格式
        if (布尔值 === false) {
            let rgb颜色格式_第一位数 = Math.floor(Math.random() * (255 + 1))
            let rgb颜色格式_第二位数 = Math.floor(Math.random() * (255 + 1))
            let rgb颜色格式_第三位数 = Math.floor(Math.random() * (255 + 1))
            return `rgb(${rgb颜色格式_第一位数},${rgb颜色格式_第二位数},${rgb颜色格式_第三位数}`
            // 字符串内容  rgb(xxx,xxx,xxx)
        }
    }

    function 倒计时显示() {
        const 当前时间戳 = +new Date() // 获取时间戳
        const 未来时间戳 = +new Date('2025-4-1 18:30:00')
        const 倒计时时间戳 = 未来时间戳 - 当前时间戳
        // 时间戳得到是毫秒，需要转换为秒在计算
        let 总秒数 = 倒计时时间戳 / 1000

        // 计算时分秒
        let 时 = 总秒数 / 60 / 60 % 24 // 取余, 余数就是 时或分钟 数, 秒同理
        let 分 = 总秒数 / 60 % 60
        let 秒 = 总秒数 % 60
        时 = parseInt(时) // 转换数字成字符串, 不带小数部分
        分 = parseInt(分)
        秒 = parseInt(秒)
        // 如果是个位数的, 就在前面补0
        if (时 <= 9) {
            时 = '0' + parseInt(时)
        }

        if (分 <= 9) {
            分 = '0' + parseInt(分)
        }

        if (秒 <= 9) {
            秒 = '0' + parseInt(秒)
        }

        // 获取DOM元素
        const 时标签 = document.querySelector('#时')
        const 分标签 = document.querySelector('#分')
        const 秒标签 = document.querySelector('#秒')
        // 修改标签信息
        时标签.innerHTML = `${时}`
        分标签.innerHTML = `${分}`
        秒标签.innerHTML = `${秒}`

        // 调用函数,实现每一秒 随机变色
        const 倒计时版面 = document.querySelector('.倒计时版面')
        倒计时版面.style.backgroundColor = `${获取随机颜色()}`
    }


    // 先调用一次函数,在使用定时器,实现无缝显示倒计时功能. 定时器是先停顿一下在执行的
    倒计时显示()
    // 使用定时器
    setInterval(倒计时显示, 1000)

</script>
</body>
</html>